<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content no-padding">
			<div class="box box-widget no-shadow">
				<div class="box-body">
					<h3>进度条颜色</h3>
					<div class="row">
						<div class="col-sm-12">
	                        <div class="progress">
	                            <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	                                <span class="sr-only">40% Complete (success)</span>
	                            </div>
	                        </div>
	                        <div class="progress">
	                            <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	                                <span class="sr-only">20% Complete</span>
	                            </div>
	                        </div>
	                        <div class="progress">
	                            <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	                                <span class="sr-only">60% Complete (warning)</span>
	                            </div>
	                        </div>
	                        <div class="progress">
	                            <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
	                                <span class="sr-only">80% Complete</span>
	                            </div>
	                        </div>
                        </div>
                    </div>
                    <h3>进度条尺寸</h3>
                    <div class="row">
                    	<div class="col-sm-12">
	                        <div class="progress">
	                            <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	                                <span class="sr-only">40% Complete (success)</span>
	                            </div>
	                        </div>
	                        <div class="progress progress-sm active">
	                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	                                <span class="sr-only">20% Complete</span>
	                            </div>
	                        </div>
	                        <div class="progress progress-xs">
	                            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	                                <span class="sr-only">60% Complete (warning)</span>
	                            </div>
	                        </div>
	                        <div class="progress progress-xxs">
	                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	                                <span class="sr-only">60% Complete (warning)</span>
	                            </div>
	                        </div>
	                    </div>
                    </div>
                    <h3>纵向进度条&尺寸</h3>
                    <div class="row">
                    	<div class="col-sm-12">
	                        <div class="progress vertical active">
	                            <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
	                                <span class="sr-only">40%</span>
	                            </div>
	                        </div>
	                        <div class="progress vertical progress-sm">
	                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
	                                <span class="sr-only">100%</span>
	                            </div>
	                        </div>
	                        <div class="progress vertical progress-xs">
	                            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
	                                <span class="sr-only">60%</span>
	                            </div>
	                        </div>
	                        <div class="progress vertical progress-xxs">
	                            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
	                                <span class="sr-only">60%</span>
	                            </div>
	                        </div>
	                    </div>
                    </div>
                    <h3>带文字的进度条</h3>
                    <div class="row">
                    	<div class="col-sm-12">
                    		<div class="progress-group">
                                <span class="progress-text">项目进度</span>
                                <span class="progress-number"><b>160</b>/200</span>
                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                                </div>
                            </div>
                            <!-- /.progress-group -->
                            <div class="progress-group">
                                <span class="progress-text">工程进度</span>
                                <span class="progress-number"><b>310</b>/400</span>
                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                                </div>
                            </div>
                    	</div>
                    </div>
				</div>
			</div>
		</section>
		<script src="../../dist/js/jquery.min.js"></script>
    	<script src="../../dist/js/lanai-ui.min.js"></script>
	</body>
</html>
